import React from 'react'
import {Row, Col, Card} from 'antd'
import moment from 'moment'
import {legendEnum} from "./js/enum";

const defaultFormatCard = {
	'not_match_count': {
		title: legendEnum.not_match_count,
		format: (initValue) => initValue
	},
	'not_match_time': {
		title: legendEnum.not_match_time,
		format: (seconds) => {
			const duration = moment.duration(seconds, 'seconds')
			const h = duration.get('hours')
			const m = duration.get('minutes')
			const s = duration.get('seconds')
			return `${h}:${m}:${s}`
		}
	},
	'collector_break_count': {
		title: legendEnum.collector_break_count,
		format: (initValue) => initValue
	},
	'collector_break_time': {
		title: legendEnum.collector_break_time,
		format: (seconds) => {
			const duration = moment.duration(seconds, 'seconds')
			const h = duration.get('hours')
			const m = duration.get('minutes')
			const s = duration.get('seconds')
			return `${h}:${m}:${s}`
		}
	},
}

const Pendect = (props) => {
	const {data, formatCard = defaultFormatCard} = props
	const gutter = 24
	let Cards = Object.keys(defaultFormatCard).map((key, index, arr) => {
		const span = Math.floor(gutter / arr.length)
		const {title} = formatCard[key]
		const initValue = data[key]
		const value = initValue !== undefined ? formatCard[key].format(initValue) : '加载中...'

		return (
			<Col span={span} key={key}>
				<Card title={title} hoverable={true} headStyle={{textAlign: "center"}}>
					<div style={{color: 'red', fontWeight: 'bold', textAlign: "center"}}>{value}</div>
				</Card>
			</Col>
		)
	})
	return (
		<Row gutter={gutter} type='flex' justify='space-between'>
			{Cards}
		</Row>
	)
}

export default Pendect
